<template>
	<div>
		<zbTable ref="tableRef" :api-fun="get_list" @action="action">
			<template #toolbar>
				<a-space>
					<!-- <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
						<template #icon>
							<plus-outlined />
						</template>
						<span>新建</span>
					</a-button>
					<a-button type="dashed" class="ele-btn-icon" @click="daochu()">
						<template #icon>
							<upload-outlined />
						</template>
						<span>导出</span>
					</a-button> -->
					<a-button
					  :type="item.types == 'add' ? 'primary' : 'dashed'"
					  v-for="item in optBtn"
					  :key="item.url"
					  v-permission="item.url"
					  @click="topAction(item)"
					>
					  <template #icon>
					    <plus-outlined v-if="item.types == 'add'" />
					    <clear-outlined v-else-if="item.types == 'delete'" />
					  </template>
					  <span>{{ item.name }}</span>
					</a-button>
				</a-space>
			</template>
		</zbTable>
		<!-- 新增/编辑弹窗 -->
		<user-edit v-if="showEdit" v-model:visible="showEdit" :actionStatus="actionStatus" :editData="editData" @done="done" />
		<!-- 审核弹窗 -->
		<check-data v-if="showCheck" v-model:visible="showCheck" :editData="editData" @done="done" />
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { actionFn } from '@/utils/action.js';
import { daochuFn } from '@/utils/daochu.js';
import { PlusOutlined, UploadOutlined, ClearOutlined } from '@ant-design/icons-vue';
import zbTable from '@/components/zbTable/jewelryIndex.vue';
import userEdit from './components/user-edit.vue';
import checkData from './components/check-data.vue';
import { get_list, cancel_purchase, del_purchase, back_verify, cancel_verify, confirm_purchase } from '@/api/jewelry/receipts_alter_goods';

// 是否显示编辑弹窗
const showEdit = ref(false);
const showCheck = ref(false);
// 编辑数据
const editData = ref({});
// 编辑按钮数据
const actionData = ref({});
// 获取子组件
const tableRef = ref(null);
const actionStatus = ref('add');
const optBtn = ref([]);

onMounted(() => {
    get_list({ page: 1, page_size: 10 })
      .then(async (res) => {
        optBtn.value = res.top_button;
      })
      .catch((e) => {
        message.error(e);
      });
  });
  
  const topAction = (item) => {
  	console.log(item)
    if (item.types == 'add') {
      editData.value.id = '';
      editData.value.code = '';
      showEdit.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: '/jewelry/receipts_alter_goods/add' };
    }
    if (item.types == 'export') {
      daochu();
    }
  };

/* 打开编辑弹窗 */
const action = data => {
	editData.value.id = data.row_data.id;
	editData.value.code = data.row_data.code;
	actionData.value = data.action_data;
	if (data.action_data.type == 'edit') {
		showEdit.value = true;
		actionStatus.value = 'edit';
	} else if (data.action_data.type == 'cancel') {
		Modal.confirm({
			title: '提示',
			content: '确定作废?',
			maskClosable: true,
			onOk: () => {
				zuofeiOk();
			}
		});
	} else if (data.action_data.type == 'delete') {
		Modal.confirm({
			title: '提示',
			content: '确定删除，删除后不可恢复?',
			maskClosable: true,
			onOk: () => {
				shanchu();
			}
		});
	} else if (data.action_data.type == 'verify') {
		showCheck.value = true;
	} else if (data.action_data.type == 'back_verify') {
		Modal.confirm({
			title: '提示',
			content: '确定反审?',
			maskClosable: true,
			onOk: () => {
				fanshen();
			}
		});
	} else if (data.action_data.type == 'cancel_verify') {
		Modal.confirm({
			title: '提示',
			content: '确定取消审核?',
			maskClosable: true,
			onOk: () => {
				cancelVerify();
			}
		});
	} else if (data.action_data.type == 'confirm') {
		Modal.confirm({
			title: '提示',
			content: '确定提交审核?',
			maskClosable: true,
			onOk: () => {
				confirmPurchase();
			}
		});
	}
};
const zuofeiOk = () => {
	cancel_purchase({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const shanchu = () => {
	del_purchase({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const fanshen = () => {
	back_verify({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const cancelVerify = () => {
	cancel_verify({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const confirmPurchase = () => {
	confirm_purchase({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};

const done = form => {
	actionFn(actionData.value, form, reloadTable);
};
const reloadTable = () => {
	showEdit.value = false;
	showCheck.value = false;
	tableRef.value.reload();
};
const daochu = ()=>{
	  let data = {
		  url:'jewelry/receipts_alter_goods/export',
		  params:{},
		  filename:'修改货品列表'
	  }
	  daochuFn(data);
	};
</script>
